<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/style.css">
		<title>登录</title>
		<style>
			html,
			body,
			.mui-content {
				height: 100%;
				background-color: #fff;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.logo {
				margin-top: 27px;
				margin-bottom: 20px;
			}
			
			.logo p {
				font-size: 13px;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 22%;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 78%;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin: 25px 15px 0;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				margin-top: 25px;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.forms.mui-input-group:before {
				background-color: transparent;
			}
			
			.forms.mui-input-group:after,
			.forms.mui-input-group .mui-input-row:after {
				left: 15px;
				right: 15px;
			}
			
			.forms.mui-input-group:after {
				background: none;
			}
			
			.forms .iconfont {
				font-size: 24px;
			}
			
			.forms.mui-input-group label {
				width: auto;
				padding: 7px 0 0 15px;
				font-size: 15px;
			}
			
			.forms .country-code {
				line-height: 40px;
				padding-left: 15px;
			}
			
			.forms .country-code span {
				padding-right: 15px;
				color: #ff0000;
				font-size: 15px;
				border-right: 1px solid #c8c7cc;
			}
			
			.forms .mui-input {
				width: auto;
				float: left;
				padding: 11px 15px 11px;
				font-size: 15px;
			}
			
			.forms .captcha {
				position: absolute;
				right: 15px;
				top: 50%;
				-webkit-transform: translate(0, -50%);
				transform: translate(0, -50%);
				color: #bfbfbf;
				font-size: 13px;
				border: none;
			}
			
			.forms .captcha:active {
				background: none;
				color: #bfbfbf;
			}
			
			.forms .mui-input-row .mui-icon-clear {
				right: 3px;
			}
			
			.forms .captcha-group .mui-icon-clear {
				display: none;
			}
			
			.login-btn{
				background-color: #bfbfbf;
			}
			
			.login-btn--active{
				background-color: #159ceb;
				border-color: #159ceb;
			}
			
			.third-party {
				width: 100%;
				position: absolute;
				bottom: 120px;
				left: 0;
				text-align: center;
			}
			
			.third-party p {
				font-size: 16px;
				color: #929292;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 30px;
				left: 0;
				/*display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;*/
				text-align: center;
				width: 100%;
				padding: 0;
				margin: 0;
			}
			
			.oauth-area .oauth-btn {
				/*-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-webkit-flex: 1;
				-ms-flex: 1;
				flex: 1;*/
				display: inline-block;
				width: 33.3%;
				text-align: center;
				/*-webkit-filter: grayscale(100%); */
			}
			
			.oauth-area .oauth-btn p {
				font-size: 16px;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			
			.oauth-area .oauth-btn .mui-icon {
				font-size: 50px;
			}
			
			.oauth-area .oauth-btn .mui-icon-qq {
				color: #439ff6;
			}
			
			.oauth-area .oauth-btn .mui-icon-weixin {
				color: #10bf28;
			}
			
			.oauth-area .oauth-btn .mui-icon-weibo {
				color: #cd1b1b;
			}
			
			.static{
				position: static;
			}
		</style>

	</head>

	<body onresize="fixHeight()">
		<header class="mui-bar mui-bar-nav navbar-default">
			<a id="back" class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
			<h1 id="title" class="mui-title c-white">登录</h1>
		</header>
		<div class="mui-content">
			<div class="mui-text-center logo">
				<img src="../../images/logo.png" width="90" height="90" alt="logo" />
				<p>临空港新闻 APP</p>
			</div>
			<!--<form class="mui-input-group forms">
				<div class="mui-input-row">
					<label>
						<i class="iconfont">&#xe620;</i>
					</label>
					<div class="mui-pull-left country-code">
						<span>+86</span>
					</div>
					<input id="phone" type="text" class="mui-input-clear mui-input" maxlength="11" placeholder="请输入11位手机号">
				</div>
				<div class="mui-input-row captcha-group">
					<label><i class="iconfont">&#xe621;</i></label>
					<input id="code" type="text" class="mui-input-clear mui-input" maxlength="4" placeholder="请输入您的验证码">
					<button class="captcha" id="captchaBtn" href="javascript:;">获取验证码</button>
				</div>
			</form>
			<div class="mui-content-padded">
				<button id="loginBtn" class="mui-btn mui-btn-block c-white login-btn">验证并登录</button>
			</div>-->
			<div class="third-party mui-text-center">
				<p>使用第三方账号登录</p>
			</div>
			<div class="mui-content-padded oauth-area">

			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.enterfocus.js"></script>
		<script src="../../libs/zepto.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/common.js"></script>
		<script>
			var uuid = null;
			var pageHeight = 0;
			//添加night自定义事件监听
			/*window.addEventListener('night', function(event) {
				lkg.nightMode();
			});*/
			(function($, doc) {
				$.init({
					beforeback: function() {
						var modeFlag = localStorage.getItem("modeFlag");
						if (modeFlag) {
							plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
							plus.navigator.setStatusBarBackground("#000");
						} else {
							var ws = plus.webview.currentWebview().opener();
							if (ws.id == "images-details.html") {
								plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
								plus.navigator.setStatusBarBackground("#000");
							} else if (ws.id == "html/my_center/my_center.html") {
								plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
								plus.navigator.setStatusBarBackground("#013b7d");
							} else {
								plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
								plus.navigator.setStatusBarBackground("#159ceb");
							}
						}
						return true;
					}
				});
				$.plusReady(function() {
					uuid = plus.device.uuid; //获取设备的唯一标识
					pageHeight = plus.android.invoke(plus.android.currentWebview(),'getHeight');
					var modeFlag = localStorage.getItem("modeFlag");
					if (modeFlag) {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#000");
					} else {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#159ceb");
					}
					plus.screen.lockOrientation("portrait-primary");
					var settings = app.getSettings();
					var state = app.getState();
					var toMain = function() {
						var mycenter = plus.webview.getWebviewById("html/my_center/my_center.html");//个人中心页
						mui.fire(mycenter, 'success');
						$.back();
					};
					//第三方登录
					var authBtns = ['weixin', 'qq', 'sinaweibo']; //配置业务支持的第三方登录
					var btnsText = ['微信', 'QQ', '微博'];
					var auths = {};
					var oauthArea = doc.querySelector('.oauth-area');
					plus.oauth.getServices(function(services) {
						for (var i in services) {
							var service = services[i];
							auths[service.id] = service;
							if (~authBtns.indexOf(service.id)) {
								var isInstalled = app.isInstalled(service.id);
								var btn = document.createElement('div');
								//如果微信未安装，则为不启用状态
								btn.setAttribute('class', 'oauth-btn');
								btn.authId = service.id;
								if (service.id == 'weixin') {
									btn.innerHTML = '<span class="mui-icon mui-icon-weixin"></span>' + '<p>' + btnsText[0] + '</p>';
								} else if (service.id == 'qq') {
									btn.innerHTML = '<span class="mui-icon mui-icon-qq"></span>' + '<p>' + btnsText[1] + '</p>';
								}
								if (service.id == 'sinaweibo') {
									btn.innerHTML = '<span class="mui-icon mui-icon-weibo"></span>' + '<p>' + btnsText[2] + '</p>';
								}
								oauthArea.appendChild(btn);
							}
						}
						$(oauthArea).on('tap', '.oauth-btn', function() {
							if (plus.networkinfo.getCurrentType() == plus.networkinfo.CONNECTION_NONE) {
								mui.toast("网络不给力");
								return;
							}
							if (this.classList.contains('disabled')) {
								plus.nativeUI.toast('您尚未安装微信客户端');
								return;
							}
							var auth = auths[this.authId];
							var logCategory = this.authId;
							auth.login(function() {
								plus.nativeUI.toast("登录认证成功");
								auth.getUserInfo(function() {
									//plus.nativeUI.toast("获取用户信息成功");
									var headimgurl = auth.userInfo.headimgurl || auth.userInfo.figureurl_qq_2 || auth.userInfo.profile_image_url;
									var name = auth.userInfo.nickname || auth.userInfo.name;
									var loginUUid = auth.authResult.openid || auth.authResult.openid || auth.userInfo.id;
									
									plus.storage.setItem(user_token, loginUUid+""); //登录成功后存储登录id
									var type = null;
									if (logCategory == 'weixin') {
										type = 0;
									} else if (logCategory == 'sinaweibo') {
										type = 1;
									} else if (logCategory == 'qq') {
										type = 2;
									}
									if (type != null) {
										requestToLog(type, name, headimgurl, loginUUid);
									}
								}, function(e) {
									plus.nativeUI.toast("登录认证失败");
								});
							}, function(e) {
								plus.nativeUI.toast("登录认证失败");
							});

							function requestToLog(logType, userName, headimgurl, loginUUid) {
								var uuid = plus.device.uuid; //获取设备的唯一标识
								if (!headimgurl) {
									headimgurl = '';
								}
								if (!userName) {
									userName = '';
								}
								if (!loginUUid) {
									loginUUid = '';
								}
								
								//console.log("headimgurl--"+headimgurl+"userName--"+userName+"loginUUid--"+loginUUid)
								//console.log(baseUrl + '/my/loginUp?devicesId=' + uuid + '&type=' + logType + '&nickname=' + userName + '&photo=' + headimgurl + '&loginUUid=' + loginUUid)
								
								mui.ajax({
									url: baseUrl + '/my/loginUp?devicesId=' + uuid + '&type=' + logType + '&nickname=' + userName + '&photo=' + headimgurl + '&loginUUid=' + loginUUid,
									dataType: 'json',
									type: 'get',
									success: function(data) {
										toMain();
									},
									error: function(xhr, type, errorThrown) {
										//异常处理；
										throwGetNewsError();
									}
								});
							}
						});
					}, function(e) {
						//oauthArea.style.display = 'none';
						plus.nativeUI.toast("登录认证失败");
					});
					window.addEventListener('resize', function() {
						oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
					}, false);
				});
			}(mui, document));
			//获取验证码
			var wait = 60;
			var phoneReg = /^[1][0-9]{10}$/;
			var codeReg = /^[0-9]{4}$/;
			var captchaBtn = document.getElementById("captchaBtn");
			captchaBtn.addEventListener("tap", function() {
				var phone = $.trim($("#phone").val());
				if (phone == "") {
					mui.toast("请输入手机号");
					return false;
				} else if (!phoneReg.test(phone)) {
					mui.toast("手机号输入有误");
					return false;
				} else {
					sendCode(captchaBtn);
					timeChange(captchaBtn);
				}
			});

			function timeChange(btn) {
				if (wait === 0) {
					$(btn).removeClass("c-red");
					btn.removeAttribute("disabled");
					btn.innerText = "获取验证码";
					wait = 60;
				} else {
					$(btn).addClass("c-red");
					btn.setAttribute("disabled", true);
					btn.innerText = "(" + wait + ")秒后重新获取";
					wait--;
					setTimeout(function() {
						timeChange(btn);
					}, 1000);
				}
			}

			function sendCode(btn) {
				var phone = $.trim($("#phone").val());
				if (btn.innerText == "获取验证码") {
					$.ajax({
						url: baseUrl + '/my/createLoginToken?phone=' + phone,
						type: "get",
						dataType: 'json',
						success: function(data) {
							if (data.returnFlag != 0) {
								mui.toast("获取验证码失败");
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							throwGetNewsError();
						}
					});
				} else {
					return false;
				}
			}
			$("#code").on("input propertychange", function() {
				var phone = $.trim($("#phone").val());
				var code = $.trim($(this).val());
				if (phone != "") {
					if (code != "") {
						$("#loginBtn").addClass("login-btn--active");
					} else {
						$("#loginBtn").removeClass("login-btn--active");
					}
				}
			});
			//登录
			document.getElementById("loginBtn").addEventListener("tap", function() {
				var phone = $.trim($('#phone').val());
				var code = $.trim($('#code').val());
				if (phone == "") {
					mui.toast("请输入手机号");
					return false;
				} else if (!phoneReg.test(phone)) {
					mui.toast("手机号输入有误");
					return false;
				}
				if (code == "") {
					mui.toast("请输入验证码");
					return false;
				} else if (!codeReg.test(code)) {
					mui.toast("验证码输入有误");
					return false;
				} else {
					$.ajax({
						url: baseUrl + '/my/accountLogin?devicesId=' + uuid + '&account=' + phone + '&token=' + code,
						type: "get",
						dataType: 'json',
						success: function(data) {
							if (data.returnFlag == 0) {
								if (data.returnCode == "A001") {
									plus.storage.setItem(user_token, phone); //登录成功后存储登录id
									var open = plus.webview.currentWebview().opener();
									open.reload();
									mui.back();
									mui.fire(open, "backFromLog", null);
								} else {
									mui.toast("您的验证码有误");
								}
							}
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							throwGetNewsError();
						}
					});
				}
			});
			function fixHeight(){
				var height = plus.android.invoke(plus.android.currentWebview(),'getHeight');
				if(height < pageHeight){
					$(".third-party").addClass("static");
				}
				else{
					$(".third-party").removeClass("static");
				}
			}
		</script>
	</body>

</html>